<template>
  <div class="detail-bottom-bar">
    <div class="bar-left">
      <div>
        <i class="icon service"></i>
        <span class="text">客服</span>
      </div>
      <div>
        <i class="icon shop"></i>
        <span class="text">店铺</span>
      </div>
      <div>
        <i class="icon select"></i>
        <span class="text">收藏</span>
      </div>
    </div>
    <div class="bar-right">
      <div @click="addToShopCart">加入购物车</div>
      <div @click="buyGoods">立即购买</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailBottomBar",
  data() {
    return {
      msgIndex: null
    }
  },
  methods: {
    addToShopCart() {
      this.$emit("addToShopCart");
    },
    buyGoods() {
      this.$layer.close(this.msgIndex);
      this.msgIndex = this.$layer.msg("购买功能开发中...", {time: 1});
    }
  }
}
</script>

<style scoped>

.detail-bottom-bar {
  display: flex;
  padding-right: 7px;
  align-items: center;
  height: 49px;
  background-color: var(--color-background);
  box-shadow: 0 -1px 1px rgba(100, 100, 100, 0.1);
}

.detail-bottom-bar .bar-left {
  flex: 1;
  display: flex;
  text-align: center;
  font-size: 12px;
}

.detail-bottom-bar .bar-left div {
  flex: 1;
}

.detail-bottom-bar .icon {
  display: block;
  width: 22px;
  height: 22px;
  margin: auto;
  background: url("~@/assets/img/detail/detail_bottom.png") 0 0/100%;
}

.detail-bottom-bar .service {
  background-position: 0 -54px;
}

.detail-bottom-bar .shop {
  background-position: 0 -98px;
}

.detail-bottom-bar .bar-right {
  display: flex;
  font-size: var(--font-size);
  text-align: center;
  width: 190px;
}

.detail-bottom-bar .bar-right div {
  flex: 1;
  padding: 8px 8px;
  color: #fff;
}

.detail-bottom-bar .bar-right div:first-child {
  background-color: #f6a819;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}

.detail-bottom-bar .bar-right div:last-child {
  background-color: #ff7700;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}
</style>